<template>
	<div class="icons">
		<swiper	:options="swiperOption">
			<swiper-slide v-for='(page,index) in pages' :key='index'>
				<div class="icon" v-for='item in page' :key='item.id'>
					<div class="icon-img">
							<img  class="icon-img-content" :src='item.imgUrl' alt="">
					</div>
					<p class="icon-desc">{{item.desc}}</p>
				</div>
			</swiper-slide>
		</swiper>
	</div>
</template>

<script>
	export default{
		name:"HomeIcons",
		data:function(){
			return {
				swiperOption:{
					auto:false
				}	
			}
		},
		props:{
			iconList:Array
		},
		computed:{
			pages:function(){
				const pages=[]
				this.iconList.forEach((item,index)=>{
					const page=Math.floor(index/8)
					if( !pages[page]){
						pages[page]=[]
					}
					/*设置pages[page]为数组*/
					pages[page].push(item)
				})
				return pages
			}
		}
	}
</script>

<style lang='stylus' scoped>
@import '~styles/variables.stylus'
@import '~styles/mix.stylus'
	.icons >>> .swiper-container
		padding-bottom 50%
		height:0
	.icons
		width:100%
		height:0 
		padding-bottom 50%
		overflow hidden
		margin-top .2rem
		.icon
			position:relative
			width:25%
			height 0
			padding-bottom:25%
			float:left
			.icon-img
				position:absolute
				top:0
				left:0
				right:0
				bottom:.44rem
				box-sizing border-box
				padding:.1rem
				.icon-img-content
					display:block
					height:100%
					margin 0 auto
			.icon-desc	
				line-height .44rem
				position:absolute
				left:0
				right:0
				bottom:0
				height:.44rem
				color:$darkTextColor
				text-align center
				ellipsis()
</style>